<template>
  <div class="Register-container">
    <!-- 注册头部 -->
    <div class="Register-header">
      <div>
        <router-link to="/Login">
          <img class="zjt" :src="puctuer.zjt" alt="" />
        </router-link>
      </div>
      <div>{{ RegisterMsg[0] }}</div>
    <!-- 循环头部的圆圈 -->
    <div>
      <ul v-for="item in list" :key="item.id">
        <li>{{ item }}</li>
      </ul>
    </div>
    </div>
    <!-- 注册模块 -->
    <el-form name="form" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <!-- 用户名 -->
        <el-form-item label="" prop="tell" class="denglmm">
          <el-input name="username" id="username" class="tellinpt" v-model="ruleForm.tell" autocomplete="off" placeholder="请输入用户名" clearable></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="" prop="pass" class="denglmm">
          <el-input name="password" type="password" id="password" v-model="ruleForm.pass" autocomplete="off" placeholder="请设置登录密码" clearable show-password></el-input>
        </el-form-item>
        <!-- 二次密码 -->
        <el-form-item label="" prop="checkPass" class="denglmm">
          <el-input name="password2" type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="请再次输入登录密码" clearable show-password></el-input>
        </el-form-item>
        <!-- 注册 -->
        <el-button class="btn_zc" id="btn_zc" @click="btnregister('form')">{{RegisterMsg[3]}}</el-button>
    </el-form>
  </div>
</template>

<script>
import axios from "@/api/request"
export default {
  name: "Register",

  data() {
    // 验证密码
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    // 验证密码与第一次输入的是否一致
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        tell: "",
        pass: "",
        checkPass: "",
      },
      rules: {
        tell:[ 
          {required: true, message: "用户名不能为空", trigger: 'blur'},
          {min: 5, max: 12, message: "用户名5-12位", trigger: 'blur'}
        ],
        pass: [
          { validator: validatePass, trigger: "blur" },
          {min: 6, max: 30, message: "密码6-30位", trigger: 'blur'}
        ],
        checkPass: [
          { validator: validatePass2, trigger: "blur" },
          {min: 6, max: 30, message: "密码6-30位", trigger: 'blur'}
        ],
      },
      RegisterMsg: ["京东注册", "登录", "发送验证码", "注册"],
      puctuer: {
        zjt: require("@/assets/images/左箭头.png"),
      },
      list:['','',''],
      value: "",
    };
  },
    methods: {
        // 注册
        btnregister(){
           // 执行校验
         this.$refs.ruleForm.validate(valid => {
         // 验证通过为true，有一个不通过就是false
         if (valid) {
            // 通过校验
            // 登录处理
            // 将数据注册入数据库
            axios({
                method:'post',
                url: 'http://127.0.0.1:3000/admin/register',
                data: {
                  username:this.ruleForm.tell,
                  password:this.ruleForm.pass,
                }
            })
            .then(res => {
                console.log(res)
                alert('注册成功')
                this.$router.replace('/login')
            })
            .catch(err => {
                alert("注册失败,用户名不能相同。")
                console.error(err);
            });
            return true;
        }
        else{
           // 没通过校验
           this.$message.error('请输入正确格式的用户名或者密码');
                return false;
        }
      })
    }
  },
};
</script>

<style scoped>
.Register-header > div:nth-of-type(1) {
  width: 15%;
  height: 100%;
}
.Register-header > div:nth-of-type(2) {
  width: 65%;
  height: 100%;
  text-align: center;
  line-height: 44px;
}
.Register-header > div:nth-of-type(3) {
  width: 20%;
  height: 100%;
  margin-left: 40px
}
.Register-header ul li {
  float: left;
  list-style: none;
  width: 4px;
  height: 4px;
  margin-left: 3px;
  border: 2px solid black;
  border-radius: 50%;
  margin-top: 5px;
}
a {
  text-decoration: none;
  color: black;
}
.tel {
  display: flex;
  margin-left: 25px;
}
.yzm-div {
  margin-left: 25px;
}
.yanzhengma {
  display: flex;
}
.gjdq {
  margin-left: 25px;
  margin-top: 30px;
  width: 110px;
}
.yanzhengm {
  margin-top: 10px;
}

.tellinpt {
  width: 350px;

  margin-top: 29.5px;
}
.Register-container {
  background-color: rgb(243, 245, 247);
  height: 700px;
  width: 400px;
  margin: 0 auto;
}
.Register-header {
  width: 100%;
  height: 44px;
  background: linear-gradient(white, rgb(239, 239, 239));
  border-bottom: 2px solid lightgray;
  display: flex;
}
.Register-header > div:nth-of-type(1) {
  width: 20%;
  height: 100%;
}
.Register-header > div:nth-of-type(2) {
  width: 60%;
  height: 100%;
  text-align: center;
  line-height: 44px;
}
.denglu {
  width: 70px;
  text-align: center;
  line-height: 44px;
}
.zjt {
  width: 25px;
  height: 25px;
  margin-top: 9.5px;
  margin-left: 5px;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.input_yzm {
  width: 220px;
  margin-left: 25px;
  margin-top: 10px;
}
.butnR {
  width: 120px;
  height: 33px;
  margin-left: 7px;
  font-size: 12px;
  margin-top: 15px;
  border: 1px solid rgb(228, 228, 228);
}
.input_mm,
.input_yzmm {
  width: 350px;
  margin-left: 25px;
  margin-top: 30px;
}
.btn_zc {
  width: 350px;
  height: 44px;
  border: 1px solid rgb(228, 228, 228);
  margin-top: 10px;
  margin-left: 25px;
  border-radius: 5px;
  letter-spacing: 10px;
  cursor: pointer;
}
.el-form-item__error {
  color: #f56c6c;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 100%;
  left: 145px;
}
.denglmm {
  margin-left: -75px;
  width: 450px;
}
</style>
